jQuery plugin – HTML decode and encode
I just found myself having encoded HTML within parts of the DOM (don’t ask me why) and I thought it would be cool to be able to parse it and encode/decode the parts where it’s needed.
Luckily this stuff already exists in the Prototype library so I ripped out some relevant lines from prototype.js and made this plugin:
jQuery.fn.encHTML = function() {
return this.each(function(){
var me = jQuery(this);
var html = me.html();
me.html(html.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'));
});
};
jQuery.fn.decHTML = function() {
return this.each(function(){
var me = jQuery(this);
var html = me.html();
me.html(html.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'));
});
};
jQuery.fn.isEncHTML = function(str) {
if(str.search(/&/g) != -1 || str.search(/</g) != -1 || str.search(/>/g) != -1)
return true;
else
return false;
};
jQuery.fn.decHTMLifEnc = function(){
return this.each(function(){
var me = jQuery(this);
var html = me.html();
if(jQuery.fn.isEncHTML(html))
me.html(html.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'));
});
}This is the most basic style of jQuery authoring, I got a helping hand here from learning jQuery. Another good resource is of course the authoring page on jquery.com.
Note the use of this.each internally in order to be able to work with a whole collection of matched DOM elements. Also, as opposed to the prototype code we used as a template, we do not strip out any tags here, that is not the functionality we want.
However as soon as I was finished I realized it was unnecessary in my case, what I needed was converting the HTML string before it became a part of the DOM, so in the end I ended up with just this:
function isEncHTML(str) {
if(str.search(/&/g) != -1 || str.search(/</g) != -1 || str.search(/>/g) != -1)
return true;
else
return false;
};
function decHTMLifEnc(str){
if(isEncHTML(str))
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return str;
}I’m using these simple functions so I know they work, here’s the test for the plugin though:
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery.html.js"></script>
<script>
$(document).ready(function(){
$(".decode").decHTML();
$(".encode").encHTML();
$(".dec_if_enc").decHTMLifEnc();
});
</script>
</head>
<body>
<div class="decode"> <a href="some link" > Here&#8217;s a link </a> </div>
<div class="decode"> <a href="some link" > Here&#8217;s a link </a> </div>
<div class="encode"> <a href="some link" > 1 & 2 </a> </div>
<div class="encode"> <a href="some link" > 1 & 2 </a> </div>
<div class="dec_if_enc"> <a href="some link" > Here&#8217;s a link </a> </div>
<div class="dec_if_enc"> <a href="some link" > Here&#8217;s a link </a> </div>
</body>
</html>And the result (after going veiw generated source in Web Developer):
<html><head>
<script src="jquery.js"></script>
<script src="jquery.html.js"></script>
<script>
$(document).ready(function(){
$(".decode").decHTML();
$(".encode").encHTML();
$(".dec_if_enc").decHTMLifEnc();
});
</script>
</head><body>
<div class="decode"> <a href="some%20link"> Here’s a link </a> </div>
<div class="decode"> <a href="some%20link"> Here’s a link </a> </div>
<div class="encode"> <a href="some%20link"> 1 &amp; 2 </a> </div>
<div class="encode"> <a href="some%20link"> 1 &amp; 2 </a> </div>
<div class="dec_if_enc"> <a href="some%20link"> Here’s a link </a> </div>
<div class="dec_if_enc"> <a href="some%20link"> Here’s a link </a> </div>
</body></html>Note that the browser converts the & above to &, after that the script will create &amp;, make the necessary changes if this is not what you want.
Related Posts
Tags: html decode, html encode, Javascript, jquery, regex